<template>
  <div id="app">
    <!-- <div class="item"></div> -->
    <!-- <flex-direction-t-vue></flex-direction-t-vue>
    <toDoList></toDoList>-->
    <!-- <to-do-list></to-do-list> -->
    <!-- <justify-content-vue></justify-content-vue> -->
    <!-- <flwx-grow-vue></flwx-grow-vue> -->
    <!-- <flex-center-vue></flex-center-vue> -->
    <!-- <top-menu-vue></top-menu-vue> -->
    <!-- <relative-vue></relative-vue> -->
    <!-- <absoluttte-vue></absoluttte-vue> -->
    <!-- <absolute-center></absolute-center> -->
    <!-- <index-vue></index-vue>-->
    <!-- <fixedtopMenu></fixedtopMenu> -->
    <!-- <simple-button-slot-vue></simple-button-slot-vue> -->

    <!-- <to-do-list-2></to-do-list-2> -->
    <!-- <reviewBindClass-vue></reviewBindClass-vue> -->
    <!-- <myButton></myButton> -->
    <!-- <index></index> -->
    <!-- <splite-mode></splite-mode> -->
    <!-- <my-input></my-input> -->
    <!--<myinput-base v-model="inputVal" clearable icon="icon-yanjing"></myinput-base>-->
    <!--{{ inputVal }}-->
    <!-- <transition-base></transition-base>
    <keyframes-base></keyframes-base> -->

     <!-- <simple-table></simple-table> -->
     <!-- <transition-input></transition-input> -->
     <!-- <my-button-1 @click="isCreated=!isCreated">生命周期组件</my-button-1>
     <life v-if="isCreated"></life>
      -->
      <!-- <index></index> -->
     <article-listmock></article-listmock>
     <mock-test></mock-test>
  </div>
 
</template>

<script>
import flexDirectionTVue from "./views/lesson4/flex-direction-t.vue";
import toDoList from "./views/lesson4/toDoList.vue";
import flexCenterVue from "./views/lesson5/flexCenter.vue";
import flwxGrowVue from "./views/lesson5/flwx-grow.vue";
import justifyContentVue from "./views/lesson5/justify-content.vue";
import topMenuVue from "./views/lesson5/topMenu.vue";
import AbsoluteCenter from "./views/lesson6/absolute-center.vue";
import AbsoluttteVue from "./views/lesson6/absoluttte.vue";
import relativeVue from "./views/lesson6/relative.vue";
import indexVue from "./views/lesson6/index.vue";
import fixedtopMenu from "./views/lesson6/fixedtopMenu.vue";
import SimpleButtonSlotVue from "./views/lesson7/SimpleButtonSlot.vue";
import reviewBindClassVue from "./views/lesson9/reviewBindClass.vue";
// import index from "./views/lesson9/index.vue";
import ToDoList2 from "./views/lesson7/toDoList2.vue";
import SpliteMode from "./views/lesson10/spliteMode.vue";
import MyInput from "./views/lesson10/myInput.vue";
// import MyinputBase from "./views/lesson10/myinput-base.vue";
import SimpleTable from "./views/lesson11/SimpleTable.vue";
import TransitionBase from './views/lesson13/transition-base.vue';
import KeyframesBase from './views/lesson13/keyframes-base.vue';
import transitionInput from './views/lesson14/transitionInput.vue';
import Life from './views/lesson14/life.vue';
import MyButton1 from './views/lesson9/myButton1.vue';
 import index from "./views/lesson15/index.vue";
import ArticleList from './views/lesson11/articleList.vue';
import articleListmock from './views/lesson16/articleList-mock.vue';
import MockTest from './views/lesson16/mock-test.vue';
export default {
  components: {
    toDoList,
    flexDirectionTVue,
    justifyContentVue,
    flwxGrowVue,
    flexCenterVue,
    topMenuVue,
    relativeVue,
    AbsoluttteVue,
    AbsoluteCenter,
    indexVue,
    fixedtopMenu,
    SimpleButtonSlotVue,
    ToDoList2,
    reviewBindClassVue,
     index,
    SpliteMode,
    MyInput,
    SimpleTable,
    TransitionBase,
    KeyframesBase,
   transitionInput,
    Life,
    MyButton1,
    ArticleList,
   articleListmock,
    MockTest
  },
  data() {
    return {
      inputVal: "",  
    };
  },
  methods: {},
};
</script>
<style>
</style>
